<template>
  <li
    @mouseenter="hoverItem"
    @click.stop="selectOptionClick"
    class="el-select-dropdown__item multiple-option"
    v-show="visible"
    :class="{
      'is-disabled': disabled || groupDisabled || limitReached,
      'hover': hover
    }">
    <slot>
      <c-checkbox class="option_checkbox" :value="itemSelected" @change="selectOptionClick"/>
      <span>{{ currentLabel }}</span>
    </slot>
  </li>
</template>
<script>
import { Option } from '@cci/cui'
export default {
  mixins: [Option]
}
</script>
<style lang="scss">
.multiple-option{
  &:first-child{
    border-bottom: 1px solid #ddd;
  }
}
.option_checkbox{
  display: inline-block;
  margin-right: 5px!important;
}
</style>
